import React, {
  FC,
  useRef,
  useMemo,
  useCallback,
  useState,
  useEffect,
} from "react";
import { ProTable, ModalForm } from "@ebonex/ebonex-ui";

import {
  ProTableColumns,
  ProTableProps,
  ProTableRefProps,
} from "@ebonex/ebonex-ui/lib/pro-table/typing";
import Actions, { ButtonType, ActionsProps } from "@/components/actions";
import {
  ModalFormProps,
  RequestType,
} from "@ebonex/ebonex-ui/lib/modal-form/typing";
import { ItemType } from "@ebonex/ebonex-ui/lib/quick-form/BaseForm/types";
import ToolBarRender from "./toolBarRender";
export interface QueryTableProps extends ProTableProps<any> {
  columnOperators: ProTableColumns;
  operatorsHide: boolean;
  addRequest: RequestType;
  addSchema: ItemType[];
  addModalFormProps: ModalFormProps;
  operatorsProps: ActionsProps;
  operators: (value: any, record: any, index: number) => React.ReactNode;
  toolBarRender?: React.ReactNode;
  columns: ProTableColumns[];
}
const QueryTable: FC<QueryTableProps> = (props) => {
  const {
    columns = [],
    columnOperators = {},
    operatorsHide = false,
    addRequest,
    schema = [],
    addSchema = [],
    addModalFormProps,
    operatorsProps,
    operators,
    toolBarRender,
    ...other
  } = props;

  const _columns = useMemo(() => {
    if (operatorsHide) {
      return columns;
    }
    return [
      ...columns,
      {
        title: "操作",
        fixed: "right",
        align: "center",
        width: 100,
        render: (value: any, record: any, index: number) => (
          <Actions>{operators?.(value, record, index)}</Actions>
        ),
        ...columnOperators,
      },
    ] as ProTableColumns[];
  }, [operators]);
  return (
    <>
      <ProTable
        rowKey={"id"}
        schema={schema}
        columns={_columns}
        toolBarRender={<ToolBarRender>{toolBarRender}</ToolBarRender>}
        size="small"
        {...other}
      />
    </>
  );
};
export default QueryTable;
